Size Change: +214 B (0%)

Total Size: 1.28 MB

_{compressed-size-action}

Good exploration, thank you.

Back in the day we had this breadcrumb, we called it. The initial idea was to provide tools to select the parent block. It didn't quite work, then it was just an indication of which block you were hovering. This turned out to also be mostly unnecessary.

But on the flipside, all the extra UI and the overlap really added headaches for the design, and complexity. And all that you saw on hover actually got in the way, whereas what you saw on select was more important. In this case, when you've selected the template part, the name is right there in the toolbar. Where it might get interesting is to show the template part border even when a child block is selected. I don't know for sure that we want that — it could end up being noise — but that seems like the thing to potentially try first, without the extra label.

What do you think?

Yes good point, I think you're right. Displaying the template part outline when innerblocks are selected is the thing to focus on first. I'll update the PR and we can continue to play around with it. I think there are cases where this will be very useful, like when there are multiple instances of the same template part on the canvas (think product grids). But yes, it shouldn't feel like unnecessary noise.

As for the label, it was pointed out to me on Slack that the persistent block navigator would probably do that job more effectively.

In the screenshot above, I've selected the Tagline block which exists within a template part — but I'm not seeing the outline of the template. Instead, you can see the outline for the Post Content block is also showing.

I think maybe there's some confusion over which block is selected and which template part is supposed to be highlighted.

Hmm I wonder if it's theme related. Here's what I see in that scenario with Twenty Twentyone Blocks:

Which theme are you using?

Pardon me as I am slightly frustrated as I feel we have been going in circles a bit.

• We tried adding the label in the past per some design suggestions, it wasn't accepted for various reasons.

• We already added a border to template parts when inner blocks were selected. It looks like the CSS was removed in this PR (Reveal block boundaries on hover in the Site Editor #27271).

• We added a 'spotlight-mode' for targeted entities (like template-parts) which was highly desired and pushed by designers to be developed for months. It seems the CSS for which was also ripped out in a commit here (Reveal block boundaries on hover in the Site Editor #27271), which I did not notice as being removed as part of that PR. I do not see much discussion there regarding this decision? It seems all the infrastructure for that system is still in place, but only the CSS got torn out. If we wanted to disable that feature to test it without again we could have just removed the block from the settings array passed to the editor on initialization

  gutenberg/packages/edit-site/src/index.js

  Line 55 in d944866

  settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];

  and left the CSS for future use and experimentation (we can add/remove items from that list to test what they would be like with that spotlight feature beyond template parts, like site data blocks, post content, and reusable blocks).

IMO the entity spotlight-mode should still be a thing. It makes it very clear what is not part of the entity you have selected (or a child of selected), and what is not. The exact problem we are trying to solve here. Moreover, the solution you are looking to apply here was previously implemented and then removed. It feels very much like we are going in circles.

Sometimes the design process involves going in one or two circles as we work out how all the pieces fit together. Apologies for that, it's not intentional 🙇‍♂️

This is a low priority issue, we can probably leave it for now.

This is a low priority issue, we can probably leave it for now.

I would disagree. Having some clarity of where the entity you are editing starts and stops is a high priority issue, so much so that multiple developers and designers worked together to tackle this with solutions in the past. Having some solutions in place is high priority, tweaking those solutions may be lower priority. Since those solutions were stripped out and there currently are none in place, re-implementing them seems high priority. With that said I have opened 2 PRs to:

• Re-introduce the CSS that was stripped for the entity spotlighting (Fix entity spotlight system. #28239)
• Re-add the template part's has-child-selected border state as you have noted the desire for here. (Fix template part border states. #28241)

We can reiterate on them and tweak them as lower priority, even replace them with alternative solutions. But with FSE moving into more of a testing cycle, we need this entity editing UX in place.

Brainstorming...
What if we do a click into selection.

Clicking to select any block that has inner blocks.
First click selects the parent block. Selects the parent toolbar and sidebar settings.
Parent block is selected. Moving the cursor inside the selected block will show the outlines of all the inner blocks and perhaps the label (similar to the select tool). One gains an easy overview of the inner blocks while the parent is selected.
One decides which of the inner blocks to select and clicks it. Focus is then moved to the selected block.

I say the above as we need a finer way to with one click to initially select the parent block then by just moving the cursor inside the parent to easily see the location and what type of inner blocks are present. Based on where the inner blocks are located and what these are one can easily get an overview and click the block one needs to adjust.

A kind of hierarchy of what one sees.
Click block - parent is selected. Hover inside to see the outlines of all the inner blocks and what type of blocks these are. Click the inner block to shift focus to it.

I think we can close this PR, and discuss the merits of the click-through pattern in 29337.